import React from "react";
import './ChooseItem.css'
import Lazyload from 'react-lazyload';
import loading from '@/assets/images/loading.gif';

const ChooseItem = (props) => {
    const {item} = props
    return (
        <>
            <div className="sortList-container">
                <div className="sortList-left">
                    <div className="sortList-left_img">
                        <div className="sortList-left_mark">{item.mark}</div>
                        <Lazyload 
                            height={100} 
                            placeholder={
                                <img width="100%" height="80%" 
                                src={loading}/> 
                            }>
                            <img src='http://p0.meituan.net/public/ff67b2ea03541353de11a41f925a2150234574.jpg@342w_342h_1e_1c' />
                        </Lazyload>
                    </div>
                </div>
                <div className="sortList-right">
                    <div className="sortList-right_head">
                        <div className="sortList-right_tag">{item.tag}</div>
                        <div className="sortList-right_title">{item.title}</div>
                    </div>
                    <div className="sortList-right_commont">附近{item.commont}人下单</div>
                    <div className="sortList-right_lock">{item.lock}</div>
                    <div className="sortList-right_bottom">
                        <div className="sortList-right_price">￥{item.price}</div>
                        <div className="sortList-right_label">{item.label}</div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ChooseItem